// 功能卡片组件 - 固定区域布局架构
.axiom-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--axiom-feature-card-min-height);
  transition: all 0.3s ease;
  overflow: hidden;
  padding: var(--axiom-feature-card-padding);
  
  // 添加卡片背景渐变
  background: var(--axiom-feature-card-bg);
  backdrop-filter: blur(10px);
  border: var(--axiom-feature-card-border);
  
  // 脉冲效果元素
  &__pulse {
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    height: 8px !important;
    background: var(--axiom-feature-card-pulse-bg) !important;
    border-radius: 4px !important;
    animation: pulse-sweep 3s linear infinite !important;
    z-index: 1000 !important;
    box-shadow: var(--axiom-feature-card-pulse-shadow) !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
    transform: none !important; 
  }

  // 顶部固定区域布局
  &__top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--axiom-feature-card-top-padding);
    min-height: var(--axiom-feature-card-top-min-height);
    
    &-left {
      flex-shrink: 0;
      min-width: 0;
      max-width: 25%;
    }
    
    &-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .axiom-feature-card__icon {
        width: var(--axiom-feature-card-icon-size);
        height: var(--axiom-feature-card-icon-size);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--axiom-feature-card-icon-bg);
        border-radius: 50%;
        color: var(--axiom-feature-card-icon-color);
        font-size: var(--axiom-feature-card-icon-font-size);
        transition: all 0.3s ease;
        box-shadow: var(--axiom-feature-card-icon-shadow);
        position: relative;
        
        // 添加发光效果
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: var(--axiom-feature-card-icon-bg);
          opacity: 0;
          transition: opacity 0.3s ease;
          filter: blur(8px);
          z-index: -1;
        }
      }
    }
    
    &-right {
      flex-shrink: 0;
      min-width: 0;
      max-width: 25%;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  // 中间内容区域布局
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--axiom-feature-card-content-padding);
    min-height: 0;
    
    &-area {
      flex-shrink: 0;
    }
    
    // 标题区域
    &__title-area {
      flex-shrink: 0;
      margin-bottom: var(--axiom-feature-card-title-margin-bottom);
      text-align: center;
      
      .axiom-feature-card__title {
        margin: 0;
        line-height: 1.4;
      }
    }
    
    // 描述区域
    &__description-area {
      flex-shrink: 0;
      margin-bottom: var(--axiom-feature-card-description-margin-bottom);
      text-align: center;
      
      .axiom-feature-card__description {
        line-height: 1.6;
        margin: 0;
        overflow: hidden;
        // 关键样式：实现多行文本截断
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; // 限制为3行
        line-clamp: 3;          // 标准属性
      }
    }
    
    // 扩展内容区域
    &__extra-content {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
  }
  
  // 底部固定区域布局  
  &__bottom {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--axiom-feature-card-bottom-padding);
    min-height: var(--axiom-feature-card-bottom-min-height);
    
    &-left {
      flex-shrink: 0;
      min-width: 0;
      max-width: 30%;
    }
    
    &-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
    }
    
    &-right {
      flex-shrink: 0;
      min-width: 0;
      max-width: 30%;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  // 顶部渐变条
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--axiom-feature-card-top-bar-height);
    background: var(--axiom-feature-card-top-bar-bg);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  // 悬停效果
  &:hover {
    transform: translateY(var(--axiom-feature-card-hover-translate-y));
    box-shadow: var(--axiom-feature-card-hover-shadow);
    border-color: var(--axiom-feature-card-hover-border-color);
    background: var(--axiom-feature-card-hover-bg);
    
    &::before {
      transform: scaleX(1);
    }
    
    .axiom-feature-card__icon {
      transform: scale(var(--axiom-feature-card-icon-hover-scale));
      box-shadow: var(--axiom-feature-card-icon-hover-shadow);
      
      &::before {
        opacity: var(--axiom-feature-card-icon-glow-opacity);
      }
    }
  }
  
  // 响应式调整
  @media (max-width: 480px) {
    min-height: var(--axiom-feature-card-mobile-min-height);
    
    &__top {
      padding: var(--axiom-feature-card-mobile-top-padding);
      min-height: var(--axiom-feature-card-mobile-top-min-height);
      
      &-center .axiom-feature-card__icon {
        width: var(--axiom-feature-card-mobile-icon-size);
        height: var(--axiom-feature-card-mobile-icon-size);
        font-size: var(--axiom-feature-card-mobile-icon-font-size);
      }
    }
    
    &__content {
      padding: var(--axiom-feature-card-mobile-content-padding);
    }
    
    &__bottom {
      padding: var(--axiom-feature-card-mobile-bottom-padding);
      min-height: var(--axiom-feature-card-mobile-bottom-min-height);
    }
    
    &__description-area .axiom-feature-card__description {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; // 限制为2行
      line-clamp: 2;         // 标准属性
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 脉冲动画定义 - 强化扫描效果
@keyframes pulse-sweep {
  0% {
    transform: translateX(-200%);
    opacity: 0;
    box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 30px var(--primary-color), 0 0 40px var(--secondary-color), 0 0 50px var(--primary-color);
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
    box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
  }
}